import React from 'react'
// ===================================================================== Form

// ===================================================================== Temp
import SubmitForm from '#cpt/temp/SubmitForm'
import Controls from '#cpt/temp/Controls'
// ===================================================================== global declare
const { $fn, $Lazy } = window
// ===================================================================== Lazy
const Box 			= $Lazy.load(()=>import('#tp/box/box'))
const FormProvider 	= $Lazy.load(()=>import('@antd/form/layout/provider'))
// ===================================================================== data
const radioData = [
	{ name:'固定（日期）', 		value:'1' },
	{ name:'固定（星期）', 		value:'2' },
	{ name:'顺延',			 	value:'3' },
	{ name:'非固定（日期）', 	value:'4' }
]
const weekData = [
	{ label:'星期一', 		value:'1' },
	{ label:'星期二', 		value:'2' },
	{ label:'星期三', 		value:'3' },
	{ label:'星期四', 		value:'4' },
	{ label:'星期五', 		value:'5' },
	{ label:'星期六', 		value:'6' },
	{ label:'星期日', 		value:'7' },
]
const monthData = []
for(var i=1; i<=31; i++ ){
	monthData.push({ label:i, value:String(i) })
}
const formData = [
	{ label: '时间类型',	name: 'selectDayType', 		full:true, type:'radio', data: radioData, value:'1' },
	{ label: '开始时间',	name: 'start_at', 			half:true, type:'time'  },
	{ label: '批准时间',	name: 'end_at', 			half:true, type:'time'  },
	{ label: '顺延天数',	name: 'postpone', 			half:true, type:'number', value:0, hide:true  },
	{ label: '星期',	name: 'week_at', 			full:true, type:'checkboxGroup', data: weekData, br:true, hide:true  },
	{ label: '日期',	name: 'date_at', 			full:true, type:'checkboxGroup', data: monthData, itemClassName:'checkbox-date'   },
]
// ===================================================================== component
class Index extends React.Component{
	state = {
		// 提交表单列表
		data : [],
	}
	
	componentDidMount(){
		this.props?.onRef(this)
		// const _data = this.setForm( [ $fn.deepCopy(formData) ] )
		// this.setState({ data: _data})
	}
	
	load = data => {
		let _data = []
		if($fn.hasArray(data)){
			data.forEach((v,i)=>{
				_data.push($fn.deepCopy(formData))
			})
		}else{
			_data = $fn.deepCopy([ $fn.deepCopy(formData) ])
		}
		
		_data = this.setForm(_data, data)
		
		this.setState({data:_data}, ()=>{
			if($fn.hasArray(data)){
				setTimeout(()=>{
					data.forEach((v,i)=>{
						this['ref' + i]?.setValue?.(v)
					})
				})
			}
		})
	}
	// 提交多个表单
	onSubmit = () => {
		this.state.data.forEach((v,i)=>{
			this['ref'+i].submit()
		})
	}
	// 动态设置表格数据
	setForm = (data, timeSet) => {
		data.forEach((v,i)=>{
			
			if($fn.hasArray(timeSet)){
				this.setStatus(v,timeSet[i]['selectDayType'])
			}else{
				// this.setStatus(v,'1')
			}
			
			if( i > 0 ){
				v[0].title = '时间设置' + (i + 1)
				v[0].titleControls = [
					{ label:'删除', danger:true, ghost:true, onClick:()=>{
						const { data } = this.state
						data.splice(i,1)
						this.setState({ data })
					} }
				]
			}
			
			// 内部联动
			v[0].onChange = ({value}) => {
				this.setStatus(v,value)
				const { data } = this.state
				this.setState({ data })
			}
			
		})
		return data
	}
	// 状态改变
	setStatus = (form, value) => {
		switch(+value){
			case 1:
				$fn.hideRows(form, ['postpone','week_at'], true)
				$fn.hideRows(form, ['date_at'], false)
				break;
			case 2:
				$fn.hideRows(form, ['postpone','date_at'], true)
				$fn.hideRows(form, ['week_at'], false)
				break;
			case 3:
				$fn.hideRows(form, ['week_at','date_at'], true)
				$fn.hideRows(form, ['postpone'], false)
				break;
			case 4:
				$fn.hideRows(form, ['postpone','week_at', 'date_at'], true)
				break;
			default:
				break;
		}
	}
	controls = () => [ 
		Controls.click.call(this,'+ 添加多次报告时间', ()=>{
			let { data } = this.state
			data.push($fn.deepCopy(formData))
			
			data = this.setForm(data)
			
			this.setState({ data})
		}, { disabled: this.props.disabled})
	]
	
	render(){
		const { data } = this.state
		const { disabled } = this.props
		return (
			<>
				<Box controls={this.controls()} contentClassName='pt10 pr10' title='发报告单时间设置' className='mt5'>
					<FormProvider onSubmit = { this.props.onSubmit } >
						{ 
							$fn.hasArray(data) && data.map((v,i)=>(
								<React.Fragment key={i}>
									{
										SubmitForm.call(this,{
											name: 'form' + i,
											labelWidth:'w200', 
											data:v, 
											disabled,
											onRef: ref => {
												this['ref'+i] = ref
											} 
										}) 
									}
								</React.Fragment>
							))
						}
					</FormProvider>
				</Box>
			</>
		)
	}
}

export default Index